<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>购物车</title>
<link href="css/base2.css" rel="stylesheet" >
<link href="css/checkout.css" rel="stylesheet" >
<link href="css/modal.css" rel="stylesheet" >
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="axios.js"></script>    
<style>
    .quentity input{
        width: 40px;
        padding: 5px 10px;
        text-align: center;
    }
    .partContent{
        width:100px;
        height: 50px;
    }

    .partContent .left{
        width:50px;
        height:50px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        float:left;
    }
    .partContent .right{
        width:50px;
        height: 50px;
        float:left;
        cursor:pointer;
    }
</style>
</head>
<body class="checkout">
<div id="app">
    <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        
      <defs>
        <symbol id="icon-del" viewBox="0 0 26 32">
            <title>删除</title>
            <path class="path1" d="M17.723 28c0.543 0 0.984-0.448 0.984-1v-12c0-0.552-0.441-1-0.984-1s-0.985 0.448-0.985 1v12c0 0.552 0.441 1 0.985 1v0zM7.877 28c0.543 0 0.984-0.448 0.984-1v-12c0-0.552-0.441-1-0.984-1s-0.985 0.448-0.985 1v12c0 0.552 0.441 1 0.985 1v0zM12.8 28c0.543 0 0.985-0.448 0.985-1v-12c0-0.552-0.441-1-0.985-1s-0.984 0.448-0.984 1v12c0 0.552 0.441 1 0.984 1v0zM23.631 4h-5.908v-2c0-1.104-0.882-2-1.969-2h-5.908c-1.087 0-1.969 0.896-1.969 2v2h-5.908c-1.087 0-1.969 0.896-1.969 2v2c0 1.104 0.882 2 1.969 2v18c0 2.208 1.765 4 3.939 4h13.784c2.174 0 3.938-1.792 3.938-4v-18c1.087 0 1.969-0.896 1.969-2v-2c0-1.104-0.882-2-1.969-2v0zM9.846 3c0-0.552 0.441-1 0.984-1h3.938c0.544 0 0.985 0.448 0.985 1v1h-5.908v-1zM21.662 28c0 1.104-0.882 2-1.969 2h-13.784c-1.087 0-1.97-0.896-1.97-2v-18h17.723v18zM22.646 8h-19.692c-0.543 0-0.985-0.448-0.985-1s0.441-1 0.985-1h19.692c0.543 0 0.984 0.448 0.984 1s-0.441 1-0.984 1v0z"></path>
        </symbol>
      </defs>
    </svg>
    <div class="container">
      <div class="cart">
          <div class="checkout-title">
              <span>购物车</span>
          </div>
          <!-- table -->
      <div class="item-list-wrap">
          <div class="cart-item">
              <div class="cart-item-head">
                  <ul>
                      <li>商品信息</li>
                      <li>商品金额</li>
                      <li>商品数量</li>
                      <li>总金额</li>
                      <li>编辑</li>
                  </ul>
              </div>
          <ul class="cart-item-list">
             <li v-for="(item,index) in list">
               <div class="cart-tab-1">
                <div class="cart-item-check">
                        <a href="javascript:void 0" class="item-check-btn"
                        v-bind:class="{check:item.isChecked}"
                        @click="selectGood(item)">
                        <svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>
                    </a>
                </div>
                <div class="cart-item-pic">
                    <img  v-bind:src="item.productImage"
                    @click="selectGood(item,index)">
                </div>
                <div class="cart-item-title">
                    <div class="item-name">{{item.productName}}</div>
                </div>
                <div class="item-include">
                    <dl>
                        <dt>赠送:</dt>
                        <dd v-for="part in item.parts">	
                            <div class="partContent">
                                <div class="left">
                                    <span
                                    @mouseover="partMouseOver(part)"
                                    @mouseout="partMouseOut(part)"
                                    v-text="part.partsName"></span>
                                </div>
                                <div class="right">
                                    <img :src="part.img" style="width:50px" v-show="part.showImg"/>
                                </div>
                            </div>
                        </dd>
                    </dl>
                </div>
              </div>
              <div class="cart-tab-2">
                  <div class="item-price">{{item.productPrice | Currency}}</div>
              </div>
              <div class="cart-tab-3">
                  <div class="item-quantity">
                      <div class="select-self select-self-open">
                          <div class="quentity">
                              <a href="javascript:void 0" @click="changeQuentity(item,-1,index)">-</a>
                              <input type="text" :value="item.productQuentity" disabled>
                              <a href="javascript:void 0" @click="changeQuentity(item,1)">+</a>
                          </div>
                      </div>
                      <div class="item-stock">有货</div>
                  </div>
              </div>
              <div class="cart-tab-4">
                  <div class="item-price-total">{{item.productPrice * item.productQuentity}}</div>
              </div>
              <div class="cart-tab-5">
                <div class="cart-item-opration">
                  <a href="javascript:void 0" class="item-edit-btn" 
                     @click="delGood(item,index)">
                     <svg class="icon icon-del"><use xlink:href="#icon-del"></use></svg>
                  </a>
                </div>
             </div>
          </li>
         </ul>
      </div>
      </div>
      <!-- footer -->
      <div class="cart-foot-wrap">
        <div class="cart-foot-l">
            <div class="item-all-check">
                <a href="javascript:void 0">
                    <span class="item-check-btn" :class="{check:isSelectAll}">
                        <svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>
                    </span>
                    <span @click="selectAll">全选</span>
                </a>
            </div>
            <div class="item-all-del">
                <a href="javascript:void 0" class="item-del-btn" @click="unSelectAll">
                    取消全选
                </a>
            </div>
        </div>
        <div class="cart-foot-r">
            <div class="item-total">
                金额小计: <span class="total-price">{{totalPrice | Currency}}</span>
            </div>
            <div class="next-btn-wrap">
                <a href="#" class="btn btn--red">结账</a>
            </div>
        </div>
      </div>
    </div>
  </div>
  <div class="md-modal modal-msg md-modal-transition" id="showModal" 
  v-bind:class="{'md-show':confirmDelete}" >
    <div class="md-modal-inner">
      <div class="md-top">
          <button class="md-close" @click="cancelDel">关闭</button>
      </div>
      <div class="md-content">
          <div class="confirm-tips">
              <p id="cusLanInfo" lan="Cart.Del.Confirm">你确认删除此订单信息吗?</p>
          </div>
          <div class="btn-wrap col-2">
              <button class="btn btn--m" id="btnModalConfirm" @click="doDel">是</button>
              <button class="btn btn--m btn--red" id="btnModalCancel" @click="cancelDel">否</button>
          </div>
      </div>
    </div>
  </div>
<div class="md-overlay" id="showOverLay" v-show="confirmDelete" ></div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
